<template>
  <div class="main">
      <Item :article="item" v-for="(item, index) in articles" :key="index" />
      <!-- <Item style="border-bottom: 1px var(--el-border-color) solid;" /> -->
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import Item from '@/components/main/item.vue'
import { useRoute } from 'vue-router'

import { findArticles } from '@/api/index'
import { Article } from '@/types/index'

const articles = ref<Article[]>([])
onMounted(async () => {
  const route = useRoute()
  console.dir(route.params.category)
  if (route.params.category === 'all') {
    const response = await findArticles()
    articles.value = response.results!
    return
  }
  const response = await findArticles(route.params.category as string)
  articles.value = response.results!
})


</script>

<style>
.main {
  padding-top: 16px;
  width: calc(90% - var(--sidebar-width));
  /* overflow: scroll; */
}
</style>
